<!--
 * @Author: hq
 * @Date: 2021-06-04 16:52:48
 * @LastEditTime: 2022-05-27 14:58:43
 * @LastEditors: hq
 * @Description: 分页组件
 * @FilePath: \shanhuo\src\components\comprehensiveView\Pagination.vue
-->
<template>
  <div>
    <el-pagination
      background
      :current-page="page.pageNum"
      :page-size="page.pageSize"
      :layout="layout"
      class="paging"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    page: {
      type: Object,
      default() {
        return {};
      },
    },
    // 组件布局
    layout: {
      type: String,
      default: "total, prev, pager, next, jumper",
    },
    // // 每页条数选项
    // pageSizes: {
    //   type: Array,
    //   default() {
    //     return [10, 20, 30, 40, 50];
    //   },
    // },
  },
  created() {},
  methods: {
    // 每页 ${val} 条
    handleSizeChange(val) {
      this.$emit("onSizeChange", val);
    },
    // 当前页: ${val}
    handleCurrentChange(val) {
      this.$emit("onCurrentChange", val);
    },
  },
};
</script>

<style lang="scss" scoped></style>
